<template>
    <CognPupop title="兑换明细" :visible="visible" @confirm="visible = false" @cancel="visible = false">
        <view class="exchangeWrap">
            <view class="exchangeStyle">
                <view class="topStyle">
                    <div class="leftStyle">
                        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/topTitile.svg" />
                        <text style="color: #fff;">本次兑换500人次</text>
                    </div>
                    <div class="rightStyle">
                        <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/yellowMoneyIcon.svg" />
                        <text>余额：{{ 500 }}</text>
                        <div class="lineStyle"></div>
                        <text>积分：{{ 500 }}</text>
                    </div>
                </view>
                <scroll-view :scroll-y="true" class="centerStyle">
                    <div v-for="item in [1]">
                        <text>试题区间:1-200,</text>
                        <text>单价:金额:2/道题</text>
                        <text>,或 积分:3/道题</text>
                    </div>
                </scroll-view>
                <view class="bottomStyle">
                    总计：1000金额或15000积分
                </view>
            </view>
            <view class="v-center" style="margin:60rpx 0 0 40rpx">
                <image src="https://qiniu-bjjrzy.bjjrzy.com/bjupi/practice/dhMethod.svg" style="width: 38rpx;height: 38rpx;" />
                <text>兑换方式：</text>
                <view class="flex">
                    <view class="center" v-for="item in exchangeMethod" @click="selectMethod = item.value"
                        style="margin-right: 26rpx;">
                        <!-- <image :src="`./static/${selectMethod == item.value ? 'selectIcon' : 'noSelectIcon'}.svg`"
                            style="width: 32rpx;height: 32rpx;margin-right: 26rpx;" /> -->
                        <view style="margin-left: 10rpx;">{{ item.text }}</view>
                    </view>
                </view>
            </view>
        </view>
    </CognPupop>
</template>

<script>
import CognPupop from "@/improve/components/CognPupop/CognPupop.vue";
import { exchangeMethod } from "@/improve/components/enum";
export default {
    name: "UploadImg",
    components: { CognPupop },
    data() {
        return {
            exchangeMethod,
            visible: false,
        }
    },
    methods: {
        open() {
            this.visible = true
        },
        bindChange(e) {
            const val = e.detail.value
            console.log(val)
        }
    }
}
</script>

<style scoped lang="scss">
/* 兑换样式 */
.exchangeWrap {
    padding: 0 36rpx 60rpx 36rpx;

    .exchangeStyle {
        background-color: #F2F9F8;
        border-radius: 24rpx;
        min-height: 350rpx;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;

        .topStyle {
            display: flex;
            justify-content: space-between;
            padding-right: 40rpx;

            .leftStyle {
                width: 328rpx;
                height: 114rpx;
                position: relative;

                image {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 328rpx;
                    height: 114rpx;
                    z-index: 1;
                }

                text {
                    position: absolute;
                    top: 22rpx;
                    left: 40rpx;
                    z-index: 2;
                    font-size: 28rpx;
                }
            }

            .rightStyle {
                display: flex;
                align-items: center;
                color: #37B874;
                flex: 1;
                justify-content: space-between;
                height: 84rpx;
                font-size: 26rpx;
                margin-left: 36rpx;

                image {
                    width: 26rpx;
                    height: 26rpx;
                }

                .lineStyle {
                    background-color: #C8F1DB;
                    width: 4rpx;
                    height: 18rpx;

                }
            }
        }

        .centerStyle {
            font-size: 26rpx;
            color: #333333;
            padding: 0 40rpx;
            flex: 1;
            max-height: 300rpx;
        }

        .bottomStyle {
            border-top: 2rpx solid #FFFFFF;
            font-size: 28rpx;
            font-weight: 600;
            color: #37B874;
            padding: 24rpx 40rpx 24rpx 40rpx;

        }
    }
}
</style>